<template>
    <div>
        <Modal
                v-model="fromItem.showModal"
                title="推荐施肥方案"
                ok-text="保存"
                @on-ok="okModal"
                @on-cancel="cancelModal"
                width="450px"
                :mask-closable="false"
                :closable="true"
                @on-visible-change="visibleChange">
            <Form v-model="fromItem" :label-width="120">
                <Row style="margin: 20px">
                    <Col span="22">
                    <label>土壤养分名称：</label>
                    <Select v-model="fromItem.nutrchose" style="width:200px" placement="bottom">
                        <Option v-for="item in fromItem.nutrList" :value="item" :key="item">
                            {{ item }}
                        </Option>
                    </Select>
                    </Col>
                </Row>
                <Row style="margin: 20px">
                    <Col span="22">
                    <label>土壤测试指标：</label>
                    <Select v-model="fromItem.elementchose" style="width:200px" placement="bottom">
                        <Option v-for="item in fromItem.elementList" :value="item" :key="item">
                            {{ item }}
                        </Option>
                    </Select>
                    </Col>
                </Row>
                <Row align="middle" style="width:100%" class="height-100">
                    <Table :border="true" :columns="table_titles" :data="fromItem.tableDatas"></Table>
                </Row>
                <Button long type="info" @click="add">添加</Button>
            </Form>

        </Modal>
        <div class="mask" v-if="showEditModal"></div>
        <div class="dataCard" v-if="showEditModal">
            <a @click="closeEditModal" class="ivu-modal-close">
                <i class="ivu-icon ivu-icon-ios-close-empty"></i>
            </a>
            <Form>
                <FormItem align="center" style="margin-top: 20px;margin-bottom: 0px">
                    <span style="font-size: 14px">测试值: </span>
                    <Input v-model="testValue" :disabled="testValue=='统一推荐'" style="width: 120px;margin-bottom: 10px"/>
                    <br>
                    <span style="font-size: 14px">推荐值: </span>
                    <Input v-model="recomValue" style="width: 120px"/>
                </FormItem>
            </Form>
            <Button type="primary" size="large" long style="margin-top: 20px" @click="editModalSave">保存</Button>
        </div>
    </div>

</template>
<style>

    .dataCard {
        z-index: 1111;
        position: fixed;
        top: 40%;
        border-radius: 5px;
        left: 35%;
        width: 350px;
        padding: 10px 20px;
        background-color: #fff;
    }

    .mask {
        background: rgba(0, 0, 0, 0.5);
        z-index: 1111;
        width: 100%;
        height: 100%;
        top: 0;
        left: 200px;
        position: fixed;
    }

</style>

<script>
    export default {
        props: {
            fromItem: Object,
            okModal: {
                type: Function,
                default() {
                    return () => {
                        fromItem.nutrchose = "请选择";
                        fromItem.elementchose = "请选择";
                        this.$Message.info("")
                    }
                }
            },
            cancelModal: {
                type: Function,
                default() {
                    return () => {
                        fromItem.nutrchose = "请选择";
                        fromItem.elementchose = "请选择";
                        this.$Message.info("取消")
                    }
                }
            }
        },
        data() {
            return {
                table_titles: [
                    {
                        title: '测试值',
                        align: 'center',
                        key: 'value',
//                        render: (h, params) => {
////                            console.log("测试:", params.row.value)
//                            return h('Input', {
//                                props: {
//                                    value: params.row.value,
//                                },
//                                style: {
//                                    width: '100px'
//                                },
//                                on: {
//                                    'on-change': (event) => {
////                                        this.ontvChange(event, params)
//                                    },
//                                    'on-blur': () => {
////                                        this.onBlur();
//                                        console.log("params", params);
//                                        console.log(event);
//                                        this.ontvChange(event, params)
//                                    }
//                                }
//                            })
//                        }
                    },
                    {
                        title: '推荐量（公斤）',
                        key: 'dosage',
                        align: 'center',
//                        render: (h, params) => {
////                            console.log("推荐：", params.row.dosage)
//                            return h('Input', {
//                                props: {
//                                    value: params.row.dosage,
//                                },
//                                style: {
//                                    width: '100px',
//                                    textAlign: 'center',
//                                },
//                                on: {
//                                    'on-change': (event) => {
////                                        this.oncvChange(event, params)
//                                    },
//                                    'on-blur': () => {
//                                        this.oncvChange(event, params);
//                                    }
//                                }
//                            })
//                        }
                    },
                    {
                        title: "操作",
                        key: 'option',
                        align: 'center',
                        render: (h, params) => {
                            var disAbled = false;
                            if (params.row.value == '统一推荐') {
                                disAbled = true;
                            }
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
//                                        disabled:disAbled,
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params)
                                        }
                                    }
                                }, "编辑"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: disAbled,
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params)
                                        }
                                    }
                                }, "删除")
                            ])
                        }
                    }
                ],
                showEditModal: false,
                testValue: '',
                recomValue: '',
                sortValue: '',
                choseEditRow: -1,
                eidtModalType: 'add',
            }

        },
        methods: {
            add: function () {
                //todo 这里需要随时保存 之前编辑的变量
//                this.fromItem.tableDatas.push({
//                    'value': "",
//                    "dosage": "",
//                })
                this.clearEditData();
                this.showEditModal = true;
                this.editModalType = 'add';
            },
            edit: function (params) {
                console.log("编辑", params)
                this.testValue = params.row.value == "统一推荐" || params.row.sortValue == '99999999999' ? "统一推荐" : params.row.sortValue;
                this.recomValue = params.row.dosage;
                this.sortValue = params.row.sortValue;
                this.editModalType = 'edit';
                this.choseEditRow = params.index;
                this.showEditModal = true;
            },

            clearEditData: function () {
                this.testValue = "";
                this.recomValue = "";
            },
            editModalSave: function () {
//                var testValue = this.testValue;
//                var recomValue = this.recomValue;
                let data = {
                    value: this.testValue,
                    dosage: this.recomValue,
                    sortValue: this.testValue,
                }
                if (this.editModalType == 'add') {
                    this.fromItem.tableDatas.push(data);
                } else {
                    data.sortValue = this.sortValue;
                    this.$set(this.fromItem.tableDatas, this.choseEditRow, data)
                }
                //todo 重新排序
                this.resetDatasOrder();
                this.showEditModal = false;
            },

            //重新排序表格数据
            resetDatasOrder: function () {
                this.fromItem.tableDatas.sort(this.compare);
                console.log("表格数据:", this.fromItem.tableDatas)
                console.log("排序未赋值:")
                this.fromItem.tableDatas.forEach(function (item, index) {
                    console.log(item.value, item.dosage, item.sortValue)
                })
                if (this.fromItem.tableDatas.length > 1) {
                    var _this = this;
                    _this.fromItem.tableDatas.forEach(function (item, index) {
                        if (index == 0) {
                            item.value = item.value = '0～' + item.sortValue
                        } else if (index == _this.fromItem.tableDatas.length - 1) {
                            item.value = ">" + _this.fromItem.tableDatas[index - 1].sortValue;
                        } else {
                            item.value = _this.fromItem.tableDatas[index - 1].sortValue + '～' + item.sortValue;
                        }
                    })
                }
                console.log("排序已赋值:")
                this.fromItem.tableDatas.forEach(function (item, index) {
                    console.log(item.value, item.dosage, item.sortValue)
                })
            },

            //排序规则
            compare: function (x, y) {
                if (parseInt(x.sortValue) < parseInt(y.sortValue)) {
                    return -1;
                } else if (parseInt(x.sortValue) >= parseInt(y.sortValue)) {
                    return 1;
                }
            },
            delete: function (params) {
                this.fromItem.tableDatas.splice(params.index, 1)
                if (this.fromItem.tableDatas.length == 1) {
                    this.fromItem.tableDatas[0].value = '统一推荐';
                    this.fromItem.tableDatas[0].dosage = '10';
                    this.fromItem.tableDatas[0].sortValue = '99999999999';
                }
                this.resetDatasOrder();
            },

            closeEditModal: function () {
                this.clearEditData();
                this.showEditModal = false;
            },

            visibleChange: function (isVisible) {
                if (isVisible && this.fromItem.optionsType == 'edit') {
                    this.resetDatasOrder();
                }
            },

            //测试值修改
            ontvChange: function (event, params) {
                this.fromItem.tableDatas[params.index].value = event.target.value;
            },
            //推荐值修改
            oncvChange: function (event, params) {
                this.fromItem.tableDatas[params.index].dosage = event.target.value;
            },
            onBlur: function () {
                console.log(event)
            }
        },
        created() {
            console.log(this.fromItem)
            if (this.fromItem.optionsType == 'edit') {
                this.resetDatasOrder();
            }

        }
    }

</script>